<template>
  <section class="assets">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="showDialog">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="assetsList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
      <el-table-column prop="assets_num" label="编号" width="120"/>
      <el-table-column prop="name" label="图片" width="120">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.img_url" alt="" @click="prevImg(scope.row.img_url)" style="width:100px;height:100px;object-fit:contain">
          </div>
        </template>
      </el-table-column>
			<el-table-column prop="name" label="名称" width="120"/>
			<el-table-column prop="assets_count" label="数量" width="100"/>
			<el-table-column prop="total_money" label="预估价" width="100"/>
			<el-table-column prop="type" label="类别" width="120"/>
      <el-table-column prop="status" label="资产状态" width="200">
        <template slot-scope="scope">
          <div>
            <el-select v-model="scope.row.status" placeholder="请选择"  @change="assetsStatusChange($event,scope.$index,scope.row.id)">
              <el-option
                v-for="item in assetsStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="use" label="备注" width="120"/>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editorDialog(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini"  @click="deleteAssets(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="80px" :model="member" >
        <el-form-item label="名称">
          <el-input v-model="member.name"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
					<el-upload
              class="avatar-uploader"
              action="https://www.rzkeji.com/api/file/upload-img"
              name="photo"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="memberPicImg" :src="memberPicImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
				</el-form-item>
        <el-form-item label="数量">
          <el-input v-model="member.number"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="预估价">
          <el-input v-model="member.exceptPrice" type="number"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="member.kind"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="member.remarks" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newAssets" v-if="!editorFlag">提交</el-button>
        <el-button type="primary" @click="updateAssets" v-else>编辑</el-button>
      </span>
    </el-dialog>

    <!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </section>
</template>

<script>
export default {
	data(){
		return {
      aaa:false,
      prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
      editorFlag:'',//区分编辑还是新增
			assetsList:[
				{name:'周杰伦',sex:'男',age:'18',birth:'1990-05-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
      ],
      dialogVisible:false,//编辑状态的弹窗
      searchType:'',//筛选的状态
      member:{
        name:'',
        number:'',
        exceptPrice:'',//预估价
        kind:'',//类别
        remarks:''
      },//弹窗的信息
      memberPicImg:'',//图片
      memberPicId:'',//图片id
      page:1,
      assetsStatus:[{label:'正常',value:'1'},{label:'报废',value:'0'}],
			totalPage:0,//总页数
		}
  },
  methods: {
    prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
    beforeAvatarUpload(file) {
			//上传照片前的操作
			console.log(file,555)
		},
    handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.memberPicImg=res.data.img_url;
				this.memberPicId=res.data.id;
			}
		},
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    showDialog(){
      //新增显示
      this.editorFlag=false;
      this.dialogVisible=true;
    },
    editorDialog(id){
      //编辑显示
      this.editorFlag=true;
      this.dialogVisible=true;
      this.id=id;
      this.showAssets(id);
    },

    async getAssetsList(){
      //获取固定资产列表
      const res=await this.$api.getAssetsList({
        page:this.page,
        limit:16
      })
      if(res.data.level=='success'){
        this.assetsList=res.data.data;
        this.totalPage=res.data.data.total
      }
    },
    pageChange(e){
			//翻页
			this.page=e;
			this.getAssetsList()
    },
    async newAssets(){
      //新增
      const res=await this.$api.assetsSetting({
        type:'add',
        name:this.member.name,
        img_id:this.memberPicId,
        assets_count:this.member.number,
        total_money:this.member.exceptPrice,
        kind:this.member.kind,
        use:this.member.remarks
        
      })
      if(res.data.level=='success'){
        this.$message({
          type:'success',
          message:res.data.message
        })
        this.getAssetsList();
        this.dialogVisible=false;
      }else{
        this.$message({
          type:'error',
          message:res.data.message
        })
      }
    },
    async showAssets(){
      //查看
      const res=await this.$api.assetsSetting({
        id:this.id,
        type:'read',
      })
      if(res.data.level=='success'){
        const data=res.data.data;
        this.member.name=data.name;
        this.member.number=data.assets_count;
        this.member.exceptPrice=data.total_money;
        this.member.kind=data.type;
        this.member.remarks=data.use;
        this.memberPicImg=data.img_url;
        this.memberPicId=data.img_id
      }
    },
    async deleteAssets(id){
      //删除

      const judge= this.$confirm('删除该固定资产?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.assetsSetting({
            id,
            type:'delete',
          })
					if(res.data.level=='success'){
						this.getAssetsList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    async updateAssets(){
      //更新
      const res=await this.$api.assetsSetting({
        id:this.id,
        type:'editor',
        name:this.member.name,
        img_id:this.memberPicId,
        assets_count:this.member.number,
        total_money:this.member.exceptPrice,
        kind:this.member.kind,
        use:this.member.remarks
      })
      if(res.data.level=='success'){
            this.getAssetsList();
            this.dialogVisible=false;
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
    },
    assetsStatusChange($event,index,id){
      //资产状态变化
      const judge= this.$confirm('改变该资产状态?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(
          async() => {
					const res=await this.$api.changeFixedAssetsStatus({
            id
          })
					if(res.data.level=='success'){
						this.getAssetsList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
        }
        ).catch(() => {
          let item=this.assetsList[index];
         item.status=='0'?item.status='1':item.status='0';
          this.$set(this.assetsList,index,item)
			});
    },
    initData(){
      this.id='';
      this.memberPicImg='';
      this.memberPicId=''
      this.member={
        name:'',
        number:'',
        exceptPrice:'',//预估价
        kind:'',//类别
        remarks:''
      }//弹窗的信息
    }
  },
  mounted() {
    this.getAssetsList()
  },
}
</script>
<style lang='scss' scoped>
.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
  .assets{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .assets .el-dialog__body{overflow: auto;}
</style>
